<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="eleTree扩展树示例">
    <meta name="keywords" content="eleTree示例,layui扩展,hsiangleev">
    <title>layui扩展树示例</title>
    <link rel="stylesheet" href="{{asset('admin/layui/layui/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{asset('admin/layui/layui/css/eleTree/eleTree.css')}}" media="all">
    <style>
        html,body{
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 15px 0px 30px 0px;
            scroll-behavior: smooth;
        }
        .eleTree{
            width: 350px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: inline-block;
            overflow-y: auto;
        }
    </style>
</head>
<body>

<div class="eleTree ele1" lay-filter="data1"></div>

<script src="{{asset('admin/layui/layui/layui.js')}}"></script>
<script>

    layui.config({
        base: "{{asset('admin/layui/lib/extend')}}/"
    }).use(['jquery','table','eleTree','code','form','slider'], function(){
        var $ = layui.jquery;
        var eleTree = layui.eleTree;
        var table = layui.table;
        var code = layui.code;
        var form = layui.form;
        var slider = layui.slider;

        var data= JSON.parse('{!! $records !!}');

        var obj={
            elem: '.ele1',
            data: data,
            // url: "../eleTree/tree.json",
            renderAfterExpand: true,
            expandOnClickNode: true,
            defaultCheckedKeys: [23],
            defaultExpandAll:true,
            accordion:true,
            draggable:true,
            showCheckbox:false,
            contextmenuList:['add','edit'],
            request: {          // 对于后台数据重新定义名字
                name: "function_name",
                key: "function_id",
                children: "treeList",
                disabled: "disabled",       // 被禁用的节点不会影响父子节点的选中状态
                checked: "checked",
                isOpen: "isOpen",
                isLeaf: "isLeaf",
                pid: "pid",
                radioChecked: "radioChecked",
                radioDisabled: "radioDisabled"
            },
        }

        eleTree.render(obj);

        eleTree.on("nodeClick(data1)",function(d) {
            console.log(d.data.currentData.pid);    // 点击节点对应的数据
            //console.log(d.event);   // event对象
            //console.log(d.node);    // 点击的dom节点
            //console.log(this);      // 与d.node相同
        })

        // 鼠标右键事件
        eleTree.on("nodeContextmenu(data1)",function(d) {
            console.log(d.data);    // 点击节点对应的数据
            console.log(d.event);   // event对象
            console.log(d.node);    // 点击的dom节点
            console.log(this);      // 与d.node相同
        })
        // 节点被拖拽事件
        eleTree.on("nodeDrag(data1)",function(d) {
            console.log(d);
            d.stop();           // 取消拖拽
            console.log(d.current);    // 起始节点对应的dom和数据
            console.log(d.target);   // 鼠标落点对应的dom和数据
            console.log(this);      // 鼠标落点对应的dom
        })

    });
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?9e39de91fc206c680fb0266ab977e776";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>
